<template>
	<view class="module swiper-module">
		<text class="module-title">泉州风光</text>
		<swiper class="top-swiper" autoplay="true" interval="3000" circular="true">
			<swiper-item>
				<image src="/static/city1.png" mode="widthFix" class="swiper-img" />
			</swiper-item>
			<swiper-item>
				<image src="/static/city2.jpg" mode="widthFix" class="swiper-img" />
			</swiper-item>
			<swiper-item>
				<image src="/static/city3.jpg" mode="widthFix" class="swiper-img" />
			</swiper-item>
			<swiper-item>
				<image src="/static/city4.jpg" mode="widthFix" class="swiper-img" />
			</swiper-item>
			<swiper-item>
				<image src="/static/city5.jpg" mode="widthFix" class="swiper-img" />
			</swiper-item>
		</swiper>
	</view>
	<view class="module rich-text-module">
		<text class="module-title">泉州介绍</text>
		<rich-text :nodes="richText"></rich-text>
	</view>
	<view class="module progress-module">
		<text class="module-title">探索进度</text>
		<text>当前进度: {{ progress }}%</text>
		<progress :percent="progress" show-info class="progress-bar" />
	</view>
	<view class="module picker-module">
		<text class="module-title">选择城市</text>
		<text>当前选择: {{ region[0] }} - {{ region[1] }} - {{ region[2] }}</text>
		<picker mode="region" @change="onRegionChange" :value="region" class="picker-btn">
			<button type="default">选择城市</button>
		</picker>
	</view>
	<view class="module setting-module">
		<text class="module-title">偏好设置</text>
		<view class="setting-item">
			<text>出行方式:</text>
			<radio-group @change="onTravelChange" class="radio-group">
				<label class="radio-label">
					<radio :value="1" :checked="travelType === 1" />公交
				</label>
				<label class="radio-label">
					<radio :value="2" :checked="travelType === 2" />自驾
				</label>
				<label class="radio-label">
					<radio :value="3" :checked="travelType === 3" />步行
				</label>
			</radio-group>
		</view>
		<view class="setting-item">
			<text>显示推荐景点:</text>
			<switch :checked="showRecommend" @change="onRecommendChange" />
		</view>
		<view class="setting-item">
			<text>探索半径: {{ radius }}km</text>
			<slider :value="radius" @change="onRadiusChange" min="1" max="50" />
		</view>
	</view>
	<view class="video-module">
	  <text class="video-title">泉州宣传视频</text>
	  <video 
	    class="target-video" 
	    :src="videoSrc" 
	    :poster="videoPoster" 
	    controls 
	    object-fit="cover" 
	    @loadedmetadata="onVideoLoaded" 
	    @error="onVideoError"
	  ></video>
	</view>
	<view class="module">
		<text class="module-title">泉州背景音乐</text>
		<view class="audio-info">
			<text class="audio-name">泉州南音精选</text>
			<text class="audio-desc">传统民乐 · 非遗传承</text>
		</view>

		<view class="audio-progress">
			<text class="time-text">{{ formatTime(currentTime) }}</text>
			<slider :value="currentTime" :min="0" :max="duration" @change="onProgressChange" class="progress-slider" />
			<text class="time-text">{{ formatTime(duration) }}</text>
		</view>

		<view class="audio-buttons">
			<button type="primary" @click="isPlaying ? pauseAudio() : playAudio()">
				{{ isPlaying ? '暂停' : '播放' }}
			</button>
			<button type="primary" @click="replayAudio">重新播放</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				richText: `<h3 style="color: #595; margin-bottom: 8px;">海上丝绸之路起点 - 泉州</h3>
	                      <p style="margin-bottom: 8px;">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</p>
	                      <p style="margin-bottom: 8px;">著名景点：<strong>清源山</strong>、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
	                      <p style="color: #007AFF;">特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>`,
				progress: 80,
				region: ['福建省', '泉州市', '丰泽区'],
				travelType: 1, 
				showRecommend: true,
				radius: 10,
				videoSrc: '/static/video/city-video.mp4',
				videoPoster: '/static/video-poster.jpg',  
				isVideoLoaded: false, 
				innerAudioContext: null,
				audioSrc: '/static/music/city-music.mp3', 
				currentTime: 0, 
				duration: 0, 
				isPlaying: false 
			};
		},
		onLoad() {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = this.audioSrc;
			this.innerAudioContext.onTimeUpdate(() => {
				this.currentTime = this.innerAudioContext.currentTime;
				this.duration = this.innerAudioContext.duration;
			});

			this.innerAudioContext.onCanplay(() => {
				this.duration = this.innerAudioContext.duration;
			});
			this.innerAudioContext.onEnded(() => {
				this.isPlaying = false;
				this.currentTime = 0;
			});
			this.innerAudioContext.onError((res) => {
				console.error('音频播放错误:', res);
				uni.showToast({
					title: '播放失败，请检查音频文件',
					icon: 'none'
				});
			});
		},
		methods: {
			onRegionChange(e) {
				this.region = e.detail.value;
			},
			onTravelChange(e) {
				this.travelType = parseInt(e.detail.value);
			},
			onRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			onRadiusChange(e) {
				this.radius = e.detail.value;
			},
			playAudio() {
				this.innerAudioContext.play();
				this.isPlaying = true;
			},
			pauseAudio() {
				this.innerAudioContext.pause();
				this.isPlaying = false;
			},
			replayAudio() {
				this.innerAudioContext.seek(0);
				this.innerAudioContext.play();
				this.isPlaying = true;
			},
			onProgressChange(e) {
				const position = e.detail.value;
				this.innerAudioContext.seek(position);
				this.currentTime = position;
			},
			formatTime(seconds) {
				if (isNaN(seconds)) return '00:00';
				const mins = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			},
			onVideoLoaded() {
				this.isVideoLoaded = true;
			},
			onVideoError(err) {
				console.error('视频播放错误：', err);
				uni.showToast({
					title: '视频加载失败，请检查文件',
					icon: 'none'
				});
				this.isVideoLoaded = false;
			}
		},
		onUnload() {
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy();
			}
		}
	};
</script>
<style>

</style>